<template>
  <div class="contrast-box activity">
    <div class="contrast">
      <ul class="c-navTab">
        <li
          v-for="(item,index) in tabs"
          :class="{active:index == num}"
          @click="tab(index)"
          :key="index"
        >
          {{item}}
       </li>
      </ul>
      <div class="c-main-box-box">
        <div class="c-main-box" v-bind:class="{translateX: num===1}">
          <div class="c-main">
            <div class="c-left">
              <div class="filter-box">
                <div class="title-date">
                  <h3 class="title"><em></em>各{{levelByte.lower}}园所<span>睡眠情况</span>横向对比</h3>
                  <ul>
                    <li class="btn1 on" @click="timeSlot(7, 311)">最近7天</li>
                    <li class="btn1" @click="timeSlot(30, 311)">最近30天</li>
                    <li>
                      <date-picker @getData="getData(arguments, 311)"></date-picker>
                    </li>
                  </ul>
                </div>
              </div>
              <ul>
                <li class="aRow">
                  <div>
                    <h3>年级选择（单选）</h3>
                    <el-radio :tabList="grade" @getRadio="getRadio(arguments, 311.1)"></el-radio>
                  </div>
                  <div class="echarts-box">
                    <el-line
                      :xData="sleepGrade.xData"
                      :data="sleepGrade.data"
                      :yName="sleepGrade.yName"
                      :color="sleepGrade.color"
                      :yPadding="sleepGrade.yPadding"
                      :grid="{
                        top: '20%',
                        left: '0%',
                        right: '0%',
                        bottom: '10%',
                        containLabel: true
                      }"
                      v-if="sleepState.summary !== '暂无总结'"
                    >
                    </el-line>
                    <no-data v-else :item="'睡眠情况'" />
                  </div>
                </li>
                <li class="aRow">
                  <div>
                    <h3>状态选择（单选）</h3>
                    <el-radio :tabList="state" @getRadio="getRadio(arguments, 311.2)"></el-radio>
                  </div>
                  <div class="echarts-box">
                    <el-line
                      :xData="sleepState.xData"
                      :data="sleepState.data"
                      :yName="sleepState.yName"
                      :color="sleepState.color"
                      :grid="{
                        top: '20%',
                        left: '0%',
                        right: '0%',
                        bottom: '10%',
                        containLabel: true
                      }"
                      v-if="sleepState.summary !== '暂无总结'"
                    >
                    </el-line>
                    <no-data v-else :item="'睡眠情况'" />
                  </div>
                </li>
              </ul>
              <el-summary :data="sleepState.summary"></el-summary>
            </div>
            <div class="c-right">
              <div class="filter-box">
                <div class="title-date">
                  <h3 class="title"><em></em>单个{{levelByte.lower}}<span>睡眠情况</span>纵向对比</h3>
                  <ul>
                    <li class="btn1 on" @click="timeSlot(90, 312)">最近3个月</li>
                    <li>
                      <month-range @getMonthRange="getMonthRange(arguments, 312)"></month-range>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3>【{{areaName}}】选择{{levelByte.lower}}（单选）</h3>
                  <el-radio :tabList="cityList" @getRadio="getRadio(arguments, 312.1)"></el-radio>
                </div>
                <div class="rowDiv">
                  <h3>年级选择（单选）</h3>
                  <el-radio :tabList="grade" @getRadio="getRadio(arguments, 312.2)"></el-radio>
                </div>
              </div>
              <h3 class="locationTitle iconfont">{{sleepL.city}}</h3>
              <div class="echarts-box">
                <pie3
                  :data="monthSleep.data"
                  v-if="monthSleep.summary !== '暂无总结'"
                ></pie3>
                <no-data v-else :item="'睡眠情况'" />
              </div>
              <el-summary :data="monthSleep.summary"></el-summary>
            </div>
          </div>
          <div class="c-main c-main-second">
            <div class="c-left">
              <div class="filter-box">
                <div class="title-date">
                  <h3 class="title"><em></em>各{{levelByte.lower}}园所<span>运动情况</span>横向对比</h3>
                  <ul>
                    <li class="btn1 on" @click="timeSlot(7, 321)">最近7天</li>
                    <li class="btn1" @click="timeSlot(30, 321)">最近30天</li>
                    <li>
                      <date-picker @getData="getData(arguments, 321)"></date-picker>
                    </li>
                  </ul>
                </div>
                <div class="float" style="margin-bottom: 20px">
                  <h3>年级选择（单选）</h3>
                  <el-radio :tabList="grade" @getRadio="getRadio(arguments, 321.1)"></el-radio>
                </div>
                <div class="float">
                  <h3>状态选择（单选）</h3>
                  <el-radio :tabList="stateS" @getRadio="getRadio(arguments, 321.2)"></el-radio>
                </div>
              </div>
              <div class="echarts-box">
                <el-line
                  :xData="sportState.xData"
                  :data="sportState.data"
                  :yName="sportState.yName"
                  :color="sportState.color"
                  :grid="{
                    top: '10%',
                    left: '0%',
                    right: '0%',
                    bottom: '5%',
                    containLabel: true
                  }"
                  v-if="sportState.summary !== '暂无总结'"
                >
                </el-line>
                <no-data v-else :item="'运动情况'" />
              </div>
              <el-summary :data="sportState.summary"></el-summary>
            </div>
            <div class="c-right">
              <div class="filter-box">
                <div class="title-date">
                  <h3 class="title"><em></em>单个{{levelByte.lower}}<span>运动情况</span>纵向对比</h3>
                  <ul>
                    <li class="btn1 on" @click="timeSlot(90, 322)">最近3个月</li>
                    <li>
                      <month-range @getMonthRange="getMonthRange(arguments, 322)"></month-range>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3>【{{areaName}}】选择{{levelByte.lower}}（单选）</h3>
                  <el-radio :tabList="cityList" @getRadio="getRadio(arguments, 322.1)"></el-radio>
                </div>
                <div class="rowDiv">
                  <h3>年级选择（单选）</h3>
                  <el-radio :tabList="grade" @getRadio="getRadio(arguments, 322.2)"></el-radio>
                </div>
              </div>
              <h3 class="locationTitle iconfont">{{sportL.city}}</h3>
              <div class="echarts-box">
                <pie3
                  :data="monthSport.data"
                  v-if="monthSport.summary !== '暂无总结'"
                ></pie3>
                <no-data v-else :item="'运动情况'" />
              </div>
              <el-summary :data="monthSport.summary"></el-summary>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import DatePicker from '@/common/elementUi/EldatePicker'
import ElRadio from '@/common/elementUi/ElRadio'
import ElLine from '@/common/echarts/Line'
import MonthRange from '@/common/layerUi/MonthRange'
import Pie3 from '@/common/echarts/expand/Pie3'
import {timeSlot} from '@/common/customTime/customTime'
import http from '@/common/axios/http'
import api from '@/common/axios/api'
import ElSummary from '@/common/summary/Summary'
export default {
  name: 'HealthyContrast',
  components: {
    DatePicker,
    ElRadio,
    ElLine,
    MonthRange,
    Pie3,
    ElSummary
  },
  data () {
    return {
      tabs: ['睡眠情况', '运动情况'],
      num: 0,
      grade: ['托班', '小班', '中班', '大班'],
      state: ['基本没睡的儿童', '睡眠较少的儿童', '睡眠正常的儿童', '睡眠充足的儿童'],
      stateS: ['运动强度低', '运动强度中', '运动强度高'],
      // 首次登陆
      isOnce: true,
      // 睡眠情况横向对比
      sleepC: {
        time: {
          startTime: '2018-07-29',
          endTime: '2018-07-30'
        },
        grade: ['托班'],
        state: '基本没睡的儿童',
        data: []
      },
      // 睡眠情况纵向对比
      sleepL: {
        time: {
          startTime: '2018-07-29',
          endTime: '2018-07-30'
        },
        city: null,
        grade: '托班',
        data: []
      },
      // 运动情况横向对比
      sportC: {
        time: {
          startTime: '2018-07-29',
          endTime: '2018-07-30'
        },
        grade: ['托班'],
        state: '运动强度低',
        data: []
      },
      // 运动情况纵向对比
      sportL: {
        time: {
          startTime: '2018-07-29',
          endTime: '2018-07-30'
        },
        city: null,
        grade: '托班',
        data: []
      },
      // 各市园所睡眠情况横向对比-年级选择
      sleepGrade: {
        xData: [],
        data: [{
          value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }],
        yName: '平均睡眠时长（分）',
        color: ['#53e9ee'],
        yPadding: [0, 0, 0, 55]
      },
      // 各市园所睡眠情况横向对比
      sleepState: {
        summary: '...',
        xData: [],
        data: [{
          value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }],
        yName: '人数（人）',
        color: ['#ffe98f']
      },
      // 各市园所睡眠情况纵向对比
      monthSleep: {
        summary: '...',
        xData: ['基本没睡', '睡眠较少', '睡眠正常', '睡眠充足'],
        data: [],
        labelNuit: '{c}人'
      },
      // 各市园所运动情况横向对比
      sportState: {
        summary: '...',
        xData: [],
        data: [{
          value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }],
        yName: '人数（人）',
        color: ['#ffe98f']
      },
      // 各市园所运动情况纵向对比
      monthSport: {
        summary: '...',
        xData: ['运动强度低', '运动强度中', '运动强度高'],
        data: [],
        labelNuit: '{c}人'
      }
    }
  },
  computed: {
    levelByte () {
      let obj = {
        curr: '省',
        lower: '市'
      }
      switch (this.areaLevel) {
        case '省级':
          obj = {
            curr: '省',
            lower: '市'
          }
          break
        case '市级':
          obj = {
            curr: '市',
            lower: '区'
          }
          break
        case '区级':
          obj = {
            curr: '区',
            lower: '园'
          }
          break
      }
      return obj
    },
    ...mapGetters({
      // 当前区域名称
      areaName: 'area',
      // 区域等级
      areaLevel: 'areaLevel',
      // 选择对比项
      cityList: 'areaMapList'
    })
  },
  async mounted () {
    // 初始化所有边框样式
    this.$common.border(window.$('.contrast'))
    await this.$store.dispatch('fetchMapFeatures')

    this.sleepL.city = this.cityList[0]
    this.sportL.city = this.cityList[0]
    this.sleepGrade.xData = this.cityList
    this.sleepState.xData = this.cityList
    this.sportState.xData = this.cityList

    this.timeSlot(7, 311)
    this.timeSlot(90, 312)
    window.$('.title-date li').click(function () {
      window.$(this).closest('li').addClass('on').siblings().removeClass('on')
    })
  },
  watch: {
    // 睡眠情况横向对比
    'sleepC.time': {
      deep: true,
      handler: function (newVal) {
        this.getSleepC(newVal)
      }
    },
    'sleepC.grade': {
      deep: true,
      handler: function (newVal) {
        this.getSleepC(this.sleepC.time)
      }
    },
    'sleepC.state': {
      deep: true,
      handler: function (newVal) {
        this.daySleepC()
      }
    },
    // 睡眠情况纵向对比
    'sleepL.time': {
      deep: true,
      handler: function (newVal) {
        this.getSleepL(newVal)
      }
    },
    'sleepL.city': {
      deep: true,
      handler: function (newVal) {
        this.getSleepL(this.sleepL.time)
      }
    },
    'sleepL.grade': {
      deep: true,
      handler: function (newVal) {
        this.getSleepL(this.sleepL.time)
      }
    },
    // 运动情况横向对比
    'sportC.time': {
      deep: true,
      handler: function (newVal) {
        this.getSportC(newVal)
      }
    },
    'sportC.grade': {
      deep: true,
      handler: function (newVal) {
        this.getSportC(this.sportC.time)
      }
    },
    'sportC.state': {
      deep: true,
      handler: function (newVal) {
        this.daySportC()
      }
    },
    // 运动情况纵向对比
    'sportL.time': {
      deep: true,
      handler: function (newVal) {
        this.getSportL(newVal)
      }
    },
    'sportL.city': {
      deep: true,
      handler: function (newVal) {
        this.getSportL(this.sportL.time)
      }
    },
    'sportL.grade': {
      deep: true,
      handler: function (newVal) {
        this.getSportL(this.sportL.time)
      }
    }
  },
  methods: {
    // 出勤情况横向对比
    getSleepC: async function (newVal) {
      let res
      let gradeNumber = 0
      switch (this.sleepC.grade) {
        case '托班':
          gradeNumber = 1
          break
        case '小班':
          gradeNumber = 2
          break
        case '中班':
          gradeNumber = 3
          break
        case '大班':
          gradeNumber = 4
          break
      }
      switch (this.areaLevel) {
        case '省级':
          res = await http.get(api.sleepCompare, {
            gardeNumber: gradeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            provinceName: this.areaName
          })
          break
        case '市级':
          res = await http.get(api.sleepCompare, {
            gardeNumber: gradeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            cityName: this.areaName
          })
          break
        case '区级':
          res = await http.get(api.sleepCompare, {
            gardeNumber: gradeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            districtName: this.areaName
          })
          break
      }
      if (res.data) {
        this.sleepC.data = res.data.data
        this.daySleepC()
      }
    },
    // 出勤情况横向对比-数据
    daySleepC () {
      let d = this.sleepC.data
      const defaultObj = {
        name: '',
        averageSleepTime: 0,
        noSleep: 0,
        lessSleep: 0,
        normalSleep: 0,
        moreSleep: 0
      }
      for (let i = 0, len = d.length; i < len; i++) {
        d[i] = window.$.extend({}, defaultObj, d[i])
      }
      const concatArr = []
      const list = this.$store.getters.areaMapList
      for (let i = 0, len = list.length; i < len; i++) {
        const result = d.filter((item) => {
          return item.name === list[i]
        })
        if (!result.length) {
          concatArr.push({
            name: list[i],
            averageSleepTime: 0,
            noSleep: 0,
            lessSleep: 0,
            normalSleep: 0,
            moreSleep: 0
          })
        }
      }
      d = d.concat(concatArr)
      // 各市园所睡眠情况横向对比-年级选择
      let $obj = {
        xData: [],
        data: [{
          value: []
        }]
      }
      for (let i = 0, len = d.length; i < len; i++) {
        $obj.xData.push(d[i].name)
        $obj.data[0].value.push(d[i].averageSleepTime)
      }
      this.sleepGrade = window.$.extend({}, this.sleepGrade, $obj)
      // 各市园所睡眠情况横向对比-状态选择
      $obj = {
        xData: [],
        data: [{
          value: []
        }]
      }
      let keyName = ''
      switch (this.sleepC.state) {
        case '基本没睡的儿童':
          keyName = 'noSleep'
          break
        case '睡眠较少的儿童':
          keyName = 'lessSleep'
          break
        case '睡眠正常的儿童':
          keyName = 'normalSleep'
          break
        case '睡眠充足的儿童':
          keyName = 'moreSleep'
          break
      }
      for (let i = 0, len = d.length; i < len; i++) {
        $obj.xData.push(d[i].name)
        $obj.data[0].value.push(d[i][keyName])
      }
      this.sleepState = window.$.extend({}, this.sleepState, $obj)
      // 总结语
      let summary = ''
      if (this.sleepC.data.length) {
        const summarySort = {
          '平均睡眠时长': this.$common.compareSort(d, 'averageSleepTime'),
          '基本没睡': this.$common.compareSort(d, 'noSleep'),
          '睡眠较少': this.$common.compareSort(d, 'lessSleep'),
          '睡眠正常': this.$common.compareSort(d, 'normalSleep'),
          '睡眠充足': this.$common.compareSort(d, 'moreSleep')
        }
        summary = '在全' + this.levelByte.curr +'范围下，各' + this.levelByte.lower + '在' + this.sleepC.time.startTime + '至' + this.sleepC.time.endTime + '的对比情况如下：<br>平均睡眠时长最长：' + summarySort['平均睡眠时长'][0].name + ' 平均睡眠时长最短：' + summarySort['平均睡眠时长'][summarySort['平均睡眠时长'].length - 1].name + '<br>基本没睡儿童人数最多：' + summarySort['基本没睡'][0].name + '<br>睡眠较少的儿童人数最多：' + summarySort['睡眠较少'][0].name + '<br>睡眠正常的儿童人数最多：' + summarySort['睡眠正常'][0].name + '<br>睡眠充足的儿童人数最多：' + summarySort['睡眠充足'][0].name // eslint-disable-line
      } else {
        summary = '暂无总结'
      }
      this.sleepState.summary = summary
    },
    // 睡眠情况纵向对比
    getSleepL: async function (newVal) {
      let res
      let gardeNumber = 1
      switch (this.sleepL.grade) {
        case '托班':
          gardeNumber = 1
          break
        case '小班':
          gardeNumber = 2
          break
        case '中班':
          gardeNumber = 3
          break
        case '大班':
          gardeNumber = 4
          break
      }
      switch (this.areaLevel) {
        case '省级':
          res = await http.get(api.singleAreaSleepCompare, {
            gardeNumber: gardeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            cityName: this.sleepL.city
          })
          break
        case '市级':
          res = await http.get(api.singleAreaSleepCompare, {
            gardeNumber: gardeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            districtName: this.sleepL.city
          })
          break
        case '区级':
          res = await http.get(api.singleAreaSleepCompare, {
            gardeNumber: gardeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            gardenId: this.getGardenId(this.sleepL.city)
          })
          break
      }
      if (res.data) {
        this.sleepL.data = res.data.data
        this.daySleepL()
      }
    },
    // 睡眠情况纵向对比-数据
    daySleepL () {
      const d = this.sleepL.data
      let arr = []
      if (d.length) {
        for (let i = 0, len = d.length; i < len; i++) {
          arr.push({
            title: d[i].date.substring(0, 7) + '月',
            data: [
              {value: d[i].noSleep, name: '基本没睡'},
              {value: d[i].lessSleep, name: '睡眠较少'},
              {value: d[i].normalSleep, name: '睡眠正常'},
              {value: d[i].moreSleep, name: '睡眠充足'}
            ]
          })
        }
      } else {
        arr = [{
          title: '暂无数据',
          data: [
            {value: 0, name: '暂无数据'}
          ]
        }]
      }
      this.monthSleep.data = arr
      // 总结语
      let summary = ''
      if (d.length) {
        const summarySort = {
          '基本没睡': this.$common.compareSort(d, 'noSleep'),
          '睡眠较少': this.$common.compareSort(d, 'lessSleep'),
          '睡眠正常': this.$common.compareSort(d, 'normalSleep'),
          '睡眠充足': this.$common.compareSort(d, 'moreSleep')
        }
        summary = this.sleepL.city + this.sleepL.grade + '在最近3个月的睡眠情况如下：<br>基本没睡人数最多：' + summarySort['基本没睡'][0].date + '的' + summarySort['基本没睡'][0].noSleep + '人 基本没睡人数最少：' + summarySort['基本没睡'][summarySort['基本没睡'].length - 1].date + '的' + summarySort['基本没睡'][summarySort['基本没睡'].length - 1].noSleep + '人<br>' + '睡眠较少人数最多：' + summarySort['睡眠较少'][0].date + '的' + summarySort['睡眠较少'][0].lessSleep + '人 基睡眠较少人数最少：' + summarySort['睡眠较少'][summarySort['睡眠较少'].length - 1].date + '的' + summarySort['睡眠较少'][summarySort['睡眠较少'].length - 1].lessSleep + '人<br>' + '睡眠正常人数最多：' + summarySort['睡眠正常'][0].date + '的' + summarySort['睡眠正常'][0].normalSleep + '人 睡眠正常人数最少：' + summarySort['睡眠正常'][summarySort['睡眠正常'].length - 1].date + '的' + summarySort['睡眠正常'][summarySort['睡眠正常'].length - 1].normalSleep + '人<br>' + '睡眠充足人数最多：' + summarySort['睡眠充足'][0].date + '的' + summarySort['睡眠充足'][0].moreSleep + '人 睡眠充足人数最少：' + summarySort['睡眠充足'][summarySort['睡眠充足'].length - 1].date + '的' + summarySort['睡眠充足'][summarySort['睡眠充足'].length - 1].moreSleep + '人' // eslint-disable-line
      } else {
        summary = '暂无总结'
      }
      this.monthSleep.summary = summary
    },
    // 运动情况横向对比
    getSportC: async function (newVal) {
      let res
      let gradeNumber = 1
      switch (this.sportC.grade) {
        case '托班':
          gradeNumber = 1
          break
        case '小班':
          gradeNumber = 2
          break
        case '中班':
          gradeNumber = 3
          break
        case '大班':
          gradeNumber = 4
          break
      }
      switch (this.areaLevel) {
        case '省级':
          res = await http.get(api.sportCompare, {
            gardeNumber: gradeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            provinceName: this.areaName
          })
          break
        case '市级':
          res = await http.get(api.sportCompare, {
            gardeNumber: gradeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            cityName: this.areaName
          })
          break
        case '区级':
          res = await http.get(api.sportCompare, {
            gardeNumber: gradeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            districtName: this.areaName
          })
          break
      }
      if (res.data) {
        this.sportC.data = res.data.data
        this.daySportC()
      }
    },
    // 运动情况横向对比-数据
    daySportC () {
      let d = this.sportC.data
      const defaultObj = {
        name: '',
        heavySum: 0,
        centerSum: 0,
        lowerSum: 0
      }
      for (let i = 0, len = d.length; i < len; i++) {
        d[i] = window.$.extend({}, defaultObj, d[i])
      }
      const concatArr = []
      let list
      this.$store.state.getters.areaMapList.length ? list = this.$store.state.getters.areaMapList : list = ['暂无']
      for (let i = 0, len = list.length; i < len; i++) {
        const result = d.filter((item) => {
          return item.name === list[i]
        })
        if (!result.length) {
          concatArr.push({
            name: list[i],
            heavySum: 0,
            centerSum: 0,
            lowerSum: 0
          })
        }
      }
      d = d.concat(concatArr)
      // 各市园所运动情况横向对比-状态选择
      let $obj = {
        xData: [],
        data: [{
          value: []
        }]
      }
      let keyName = ''
      switch (this.sportC.state) {
        case '运动强度低':
          keyName = 'lowerSum'
          break
        case '运动强度中':
          keyName = 'centerSum'
          break
        case '运动强度高':
          keyName = 'heavySum'
          break
      }
      for (let i = 0, len = d.length; i < len; i++) {
        $obj.xData.push(d[i].name)
        $obj.data[0].value.push(d[i][keyName])
      }
      this.sportState = window.$.extend({}, this.sportState, $obj)
      // 总结语
      let summary = ''
      if (this.sportC.data.length) {
        const summarySort = {
          '运动强度低': this.$common.compareSort(d, 'lowerSum'),
          '运动强度中': this.$common.compareSort(d, 'centerSum'),
          '运动强度高': this.$common.compareSort(d, 'heavySum')
        }
        summary = '在全' + this.levelByte.curr +'范围下，各' + this.levelByte.lower + '在' + this.sportC.time.startTime + '至' + this.sportC.time.endTime + '的对比情况如下：<br>' + this.sportC.grade + ':<br>运动强度低儿童人数最多：' + summarySort['运动强度低'][0].name + '<br>运动强度中儿童人数最多：' + summarySort['运动强度中'][0].name + ':<br>运动强度高儿童人数最多：' + summarySort['运动强度高'][0].name // eslint-disable-line
      } else {
        summary = '暂无总结'
      }
      this.sportState.summary = summary
    },
    // 运动情况纵向对比
    getSportL: async function (newVal) {
      let res
      let gardeNumber = 1
      switch (this.sportL.grade) {
        case '托班':
          gardeNumber = 1
          break
        case '小班':
          gardeNumber = 2
          break
        case '中班':
          gardeNumber = 3
          break
        case '大班':
          gardeNumber = 4
          break
      }
      switch (this.areaLevel) {
        case '省级':
          res = await http.get(api.singleAreaSportCompare, {
            gardeNumber: gardeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            cityName: this.sportL.city
          })
          break
        case '市级':
          res = await http.get(api.singleAreaSportCompare, {
            gardeNumber: gardeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            districtName: this.sportL.city
          })
          break
        case '区级':
          res = await http.get(api.singleAreaSportCompare, {
            gardeNumber: gardeNumber,
            firstDateTime: newVal.startTime,
            lastDateTime: newVal.endTime,
            gardenId: this.getGardenId(this.sportL.city)
          })
          break
      }
      if (res.data) {
        this.sportL.data = res.data.data
        this.daySportL()
      }
    },
    // 运动情况纵向对比-数据
    daySportL () {
      const d = this.sportL.data
      let arr = []
      if (d.length) {
        for (let i = 0, len = d.length; i < len; i++) {
          arr.push({
            title: d[i].date.substring(0, 7) + '月',
            data: [
              {value: d[i].lowerCount, name: '运动强度低'},
              {value: d[i].centerCount, name: '运动强度中'},
              {value: d[i].heavyCount, name: '运动强度高'}
            ]
          })
        }
      } else {
        arr = [{
          title: '暂无数据',
          data: [
            {value: 0, name: '暂无数据'}
          ]
        }]
      }
      this.monthSport.data = arr
      // 总结语
      let summary = ''
      if (d.length) {
        const summarySort = {
          '运动强度低': this.$common.compareSort(d, 'lowerCount'),
          '运动强度中': this.$common.compareSort(d, 'centerCount'),
          '运动强度高': this.$common.compareSort(d, 'heavyCount')
        }
        summary = this.sportL.city + this.sportL.grade + '在最近3个月的运动情况如下：<br>运动强度低人数最多：' + summarySort['运动强度低'][0].date + '的' + summarySort['运动强度低'][0].lowerCount + '人 运动强度低人数最少：' + summarySort['运动强度低'][summarySort['运动强度低'].length - 1].date + '的' + summarySort['运动强度低'][summarySort['运动强度低'].length - 1].lowerCount + '人<br>' + '运动强度中人数最多：' + summarySort['运动强度中'][0].date + '的' + summarySort['运动强度中'][0].centerCount + '人 运动强度中少人数最少：' + summarySort['运动强度中'][summarySort['运动强度中'].length - 1].date + '的' + summarySort['运动强度中'][summarySort['运动强度中'].length - 1].centerCount + '人<br>' + '运动强度高人数最多：' + summarySort['运动强度高'][0].date + '的' + summarySort['运动强度高'][0].heavyCount + '人 运动强度高人数最少：' + summarySort['运动强度高'][summarySort['运动强度高'].length - 1].date + '的' + summarySort['运动强度高'][summarySort['运动强度高'].length - 1].heavyCount + '人' // eslint-disable-line
      } else {
        summary = '暂无总结'
      }
      this.monthSport.summary = summary
    },
    // 对比数据标签切换
    tab (index) {
      this.num = index
      if (index === 1 && this.isOnce) {
        this.timeSlot(7, 321)
        this.timeSlot(90, 322)
        this.isOnce = !this.isOnce
      }
    },
    getGardenId (gardenName) {
      const arr = this.$store.state.gardenIdList
      const obj = arr.filter((p) => {
        return p.gardenName === gardenName
      })
      if (obj.length) {
        return obj[0].gardenId
      }
    },
    // 最近一段时间
    timeSlot (d, i) {
      const res = timeSlot(d)
      switch (i) {
        case 311:
          this.sleepC.time.startTime = res.t1
          this.sleepC.time.endTime = res.t2
          this.sleepC.time.startTime = res.t1
          this.sleepC.time.endTime = res.t2
          break
        case 312:
          this.sleepL.time.startTime = res.t1
          this.sleepL.time.endTime = res.t2
          break
        case 321:
          this.sportC.time.startTime = res.t1
          this.sportC.time.endTime = res.t2
          this.sportC.time.startTime = res.t1
          this.sportC.time.endTime = res.t2
          break
        case 322:
          this.sportL.time.startTime = res.t1
          this.sportL.time.endTime = res.t2
          break
      }
    },
    // 开始结束时间(天)
    getData (d, i) {
      const res = d[0]
      switch (i) {
        case 311:
          this.sleepC.time.startTime = res.t1
          this.sleepC.time.endTime = res.t2
          this.sleepC.time.startTime = res.t1
          this.sleepC.time.endTime = res.t2
          break
        case 321:
          this.sportC.time.startTime = res.t1
          this.sportC.time.endTime = res.t2
          this.sportC.time.startTime = res.t1
          this.sportC.time.endTime = res.t2
          break
      }
    },
    // 开始结束时间(月)
    getMonthRange (d, i) {
      const res = d[0]
      switch (i) {
        case 312:
          this.sleepL.time.startTime = res.t1
          this.sleepL.time.endTime = res.t2
          break
        case 322:
          this.sportL.time.startTime = res.t1
          this.sportL.time.endTime = res.t2
          break
      }
    },
    // 城市单选
    getRadio (d, i) {
      const res = d[0]
      switch (i) {
        case 311.1:
          this.sleepC.grade = res
          break
        case 311.2:
          this.sleepC.state = res
          break
        case 312.1:
          this.sleepL.city = res
          break
        case 312.2:
          this.sleepL.grade = res
          break
        case 321.1:
          this.sportC.grade = res
          break
        case 321.2:
          this.sportC.state = res
          break
        case 322.1:
          this.sportL.city = res
          break
        case 322.2:
          this.sportL.grade = res
          break
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.activity
  .c-left
    .filter-box
      margin: 0!important
    ul
      flex: 1
      overflow: hidden
      li
        display: flex
        flex-direction: column
        height: 50%
        .echarts-box
          margin-top: 20px
  .c-right
    .filter-box > div:nth-child(2)
      margin-bottom: 20px
</style>
